---
import LayoutBase from '@/layouts/layout-base.astro';
import '@/styles/blog.scss';
---

<LayoutBase
  title="博客"
  description="wudandong | 博客"
>
  <div class="py-[20px] mx-auto md:px-[20px] max-w-[1200px]">
    <ul class="blog-list" id="blogList">
      <!-- 博客列表将通过JavaScript动态加载 -->
  </ul>
  </div>
</LayoutBase>

<script>
  // 替换为您的CSDN RSS feed URL
  const rssFeedUrl = '/csdn_host/weixin_38728902/rss/map';

  fetch(rssFeedUrl)
      .then(response => response.text())
      .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
      .then(data => {
          const items = data.querySelectorAll("item");
          const blogList = document.getElementById('blogList');
          if(!blogList) return 

          items.forEach(item => {
              const title = item.querySelector("title")!.textContent;
              const link = item.querySelector("link")!.textContent;
              const pubDate = item.getElementsByTagName("pubDate")[0].textContent;
              const description = item.getElementsByTagName("description")[0].textContent;

              const blogItem = document.createElement('li');
              blogItem.className = 'blog-item';

              const blogTitle = document.createElement('div');
              blogTitle.className = 'blog-title';
              const blogLink = document.createElement('a');
              if(link) blogLink.href = link;
              blogLink.className = 'blog-link';
              blogLink.target = '_blank';
              blogLink.textContent = title;
              blogTitle.appendChild(blogLink);

              const blogDescription = document.createElement('p');
              blogDescription.className = 'blog-description';
              blogDescription.textContent = description;

              const blogMeta = document.createElement('div');
              blogMeta.className = 'blog-meta';
              const blogDate = document.createElement('span');
              blogDate.className = 'blog-date';
              blogDate.textContent = new Date(pubDate as string).toLocaleDateString();
              blogMeta.appendChild(blogDate);

              blogItem.appendChild(blogTitle);
              blogItem.appendChild(blogDescription);
              blogItem.appendChild(blogMeta);
              blogList.appendChild(blogItem);
          });
      })
      .catch(error => {
          console.error('Error fetching the RSS feed:', error);
      });
</script>

<style>
  .x-main {
      padding: 20px;
  }
  .header {
      text-align: center;
      margin-bottom: 20px;
  }
  .blog-list {
      list-style-type: none;
      padding: 0;
  }
</style>